<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" bar-width="200" bar-height="3" name="cate_name" active-color="#2E3C4D" inactive-color="#7A8899" :list="list" :is-scroll="false" @change="tabClick" :current="current"></u-tabs-swiper>
		</view>

		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
			<!-- 发送数据 -->
			<swiper-item class="swiper-item">
				<view class="little-title">发送数据</view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/3.png"></image>
          <view class="detail-content">
            <view class="content-top">累计发送</view>
            <view class="content-bottom">Cumulative&nbsp;quantity</view>
          </view>
          <view class="detail-data-total">
            10020
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/2.png"></image>
          <view class="detail-content">
            <view class="content-top">今日发送</view>
            <view class="content-bottom">Quantity sent today</view>
          </view>
          <view class="detail-data-today">
            +1000
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/1.png"></image>
          <view class="detail-content">
            <view class="content-top">昨日发送</view>
            <view class="content-bottom">Quantity sent yesterday</view>
          </view>
          <view class="detail-data-yesterday">
            300
          </view>
        </view>
			</swiper-item>
			<!-- 抖音数据 -->
			<swiper-item class="swiper-item">
				<view class="little-title">抖音数据</view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/heart.png"></image>
          <view class="detail-content">
            <view class="content-top">累计点赞</view>
            <view class="content-bottom">Cumulative download</view>
          </view>
          <view class="detail-data" style="color:rgb(240, 89, 78)">
            10020
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/right.png"></image>
          <view class="detail-content">
            <view class="content-top">累计转发</view>
            <view class="content-bottom">Cumulative forwarding</view>
          </view>
          <view class="detail-data">
            1000
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/stop.png"></image>
          <view class="detail-content">
            <view class="content-top">累计播放量</view>
            <view class="content-bottom">Cumulative play volume</view>
          </view>
          <view class="detail-data">
            300
          </view>
        </view>
			</swiper-item>
			<!-- 核销数据 -->
			<swiper-item class="swiper-item">
				<view class="little-title">核销数据</view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/3.png"></image>
          <view class="detail-content">
            <view class="content-top">累计核销</view>
            <view class="content-bottom">Cumulative Write off</view>
          </view>
          <view class="detail-data-total">
            10020
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/edit.png"></image>
          <view class="detail-content">
            <view class="content-top">今日核销</view>
            <view class="content-bottom">Write off today</view>
          </view>
          <view class="detail-data-today">
            +1000
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/edit_g.png"></image>
          <view class="detail-content">
            <view class="content-top">昨日核销</view>
            <view class="content-bottom">Write off yesterday</view>
          </view>
          <view class="detail-data-yesterday">
            300
          </view>
        </view>
			</swiper-item>
		</swiper>

	</view>


</template>

<script>
import {sendCount,videoData,getCouponAndCheckCounts} from "../../../api/shop";

export default {
		data() {
			return {
				swiperCurrent: 0,
				current: 0,
				list: [{
					cate_name: '发送数据'
				}, {
					cate_name: '抖音数据'
				}, {
					cate_name: '核销数据'
				}],
				tabs:[
					1,2,3
				],
        //发送数据
        sendData:{},
        //抖音数据
        TikTokData:{},
        //核销数据
        couponData:{}
			}
		},
    onShow(){
		  this.getSendData();
		  this.getVideoData();
		  this.getCouponData();
    },
		methods:{
		  //获取发送数据
      getSendData(){
        sendCount().then(res =>{
          this.sendData = res.data
        })
      },
      getVideoData(){
        videoData().then(res =>{
          this.TikTokData = res.data
        })
      },
      getCouponData(){
        getCouponAndCheckCounts().then(res =>{
          this.couponData = res.data
        })
      },
			// 点击标签栏change事件
			tabClick(e){
				this.swiperCurrent = e;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				console.log(e.detail.current,'666')
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style lang="scss">
	uni-swiper{
		height: 100%
	}
	swiper{
		height: 550rpx;
	}
	.swiper-item{
		// display: block;
		// position: relative;
		height: 500rpx;
		.little-title{
			// position: absolute;
			width: 104rpx;
			height: 36rpx;
			margin-left: 50rpx;
			margin-top: 34rpx;
			font-size: 26rpx;
			color: #7A8899;
			font-weight: 600;
		}
	}

	.item-detail{
		margin: 30rpx auto 30rpx;
		width: 90%;
		display: flex;
		justify-content: space-between;
		.detail-img{
			width: 120rpx;
			height: 120rpx;
		}
		.detail-content{
			margin: 15rpx 20rpx 0 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			.content-top{
				// z-index: 74;
				// width: 406rpx;
				height: 44rpx;
				display: block;
				overflow-wrap: break-word;
				color: #242B33;
				font-size: 32rpx;
				white-space: nowrap;
				line-height: 44rpx;
				text-align: left;
				font-weight: 600;
				letter-spacing: 3rpx;
			}
			.content-bottom{
				z-index: 73;
				display: block;
				overflow-wrap: break-word;
				color: rgba(138, 145, 153, 1);
				font-size: 28rpx;
				white-space: nowrap;
				line-height: 38rpx;
				text-align: left;
				margin-top: 4rpx;
			}
		}
		.detail-data{
			z-index: 71;
			width: 90rpx;
			display: block;
			overflow-wrap: break-word;
			color: #8F9FB3;
			font-size: 32rpx;
			white-space: nowrap;
			line-height: 44rpx;
			// text-align: right;
			margin: 20rpx 0 0 50rpx;
			font-weight: 600;
		}
		.detail-data-total{
			z-index: 71;
			width: 90rpx;
			display: block;
			overflow-wrap: break-word;
			color: rgba(40, 131, 242, 1);
			font-size: 32rpx;
			white-space: nowrap;
			line-height: 44rpx;
			text-align: right;
			margin: 30rpx 0 0 50rpx;
			font-weight: 600;
		}
		.detail-data-today{
			z-index: 71;
			width: 90rpx;
			display: block;
			overflow-wrap: break-word;
			color: #008C41;
			font-size: 32rpx;
			white-space: nowrap;
			line-height: 44rpx;
			text-align: right;
			margin: 30rpx 0 0 50rpx;
			font-weight: 600;
		}
		.detail-data-yesterday{
			z-index: 71;
			width: 90rpx;
			display: block;
			overflow-wrap: break-word;
			color: #8F9FB3;
			font-size: 32rpx;
			white-space: nowrap;
			line-height: 44rpx;
			text-align: right;
			margin: 30rpx 0 0 50rpx;
			font-weight:550;
		}

	}


</style>
